<script setup lang="ts">
import type {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/team.ts";
import defaut from "../assets/OIP-C.webp"
import MyAxios from "../plugins/MyAxios.ts";
import {showFailToast, showSuccessToast} from "vant/es";
import {onMounted, ref} from 'vue';
import {getCurrentUser} from "../service/user.ts";
import type {UserType} from "../models/user";
import router from "../config/router.ts";
interface TeamCardListProps {
  teamList: TeamType[];
}
const password = ref()


const props = defineProps<TeamCardListProps>();
const joinTeam = async (team: TeamType) => {
 const resp= await MyAxios.post(`/team/add/team`,{
   id: team.id,
   password: password.value ? password.value:""
 });
 if (resp.status===0)
 {
   showSuccessToast("加入队伍成功")
 }
 else
   showFailToast('加入队伍失败'+(resp.description ? `${resp.description}`:''))
}
const showDialog = ref(false);
const showInputDialog = () => {
  showDialog.value = true;
};
const onSubmit = (team: TeamType) => {
  joinTeam(team);
};

// 获取状态标签类型
const getStatusType = (status: number) => {
  switch (status) {
    case 0: return 'success';
    case 1: return 'warning';
    case 2: return 'danger';
    default: return 'primary';
  }
};

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return '';
  const date = new Date(time);
  return date.toLocaleString('zh-CN');
};
const currentUser = ref<UserType | null>();

onMounted(async () => {
  currentUser.value =  await getCurrentUser()
})

const updateTeam = (team: TeamType) => {
router.push({
  path: `/team/update`,
  query: {
    id : team.id
  }
})

}


const deleteTeam = async (team: TeamType) => {
  const resp = await MyAxios.post(`/team/delete`, {
    id: team.id
  });
  if (resp.status === 0) {
    showSuccessToast("解散队伍成功");
    // 刷新队伍列表
    window.location.reload();
  } else {
    showFailToast('解散队伍失败' + (resp.description ? `${resp.description}` : ''));
  }
}
const quitTeam = async (team: TeamType) => {
  const resp = await MyAxios.post(`/team/quit`, {
    id: team.id
  });
  if (resp.status === 0) {
    showSuccessToast("退出队伍成功");
    // 刷新队伍列表
    window.location.reload();
  } else {
    showFailToast('退出队伍失败' + (resp.description ? `${resp.description}` : ''));
  }
}




</script>

<template>
  <div class="team-card-list">
    <div v-for="team in props.teamList" :key="team.id" class="team-card-wrapper">
      <van-card
          :desc="team.description"
          :title="team.teamName"
          :thumb="defaut"
          class="team-card"
      >
        <template #tags>
          <van-tag 
            plain 
            :type="getStatusType(team.status)"
            class="status-tag"
          >
            {{ teamStatusEnum[team.status] }}
          </van-tag>
        </template>
        
        <template #bottom>
          <div class="team-info">
            <div class="info-item">
              <van-icon name="friends-o" size="14" />
              <span>最大人数: {{ team.maxNum }}</span>
            </div>
            <div v-if="team.expierTime" class="info-item">
              <van-icon name="clock-o" size="14" />
              <span>过期时间: {{ formatTime(team.expierTime) }}</span>
            </div>
          </div>
        </template>
        
        <template #footer>
          <div class="action-buttons">
            <van-button 
              v-if="team.userId !== currentUser?.id && team.hasJoin && team.status === 0"
              size="small" 
              type="primary"
              class="action-btn"
              @click="joinTeam(team)"
            >
              <van-icon name="plus" size="12" />
              加入队伍
            </van-button>
            
            <van-button 
              v-if="team.userId !== currentUser?.id && team.hasJoin"
              size="small" 
              type="warning"
              class="action-btn"
              @click="quitTeam(team)"
            >
              <van-icon name="minus" size="12" />
              退出队伍
            </van-button>
            
            <van-button 
              v-if="team.userId === currentUser?.id"
              size="small" 
              type="primary"
              class="action-btn"
              @click="updateTeam(team)"
            >
              <van-icon name="edit" size="12" />
              更新队伍
            </van-button>
            
            <van-button 
              v-if="team.userId === currentUser?.id"
              size="small" 
              type="danger"
              class="action-btn"
              @click="deleteTeam(team)"
            >
              <van-icon name="delete" size="12" />
              解散队伍
            </van-button>

            <van-button 
              v-if="team.userId !== currentUser?.id && team.hasJoin && team.status === 2"
              type="primary"
              size="small"
              class="action-btn"
              @click="showInputDialog"
            >
              <van-icon name="lock" size="12" />
              加入队伍
            </van-button>
          </div>
        </template>
      </van-card>
    </div>
    
    <van-empty 
      v-if="!teamList || teamList.length < 1" 
      image="search" 
      description="暂无队伍信息"
      class="empty-state"
    >
      <van-button type="primary" @click="$emit('refresh')">
        刷新试试
      </van-button>
    </van-empty>
    
    <!-- 密码输入对话框 -->
    <van-dialog
        v-model:show="showDialog"
        title="队伍密码"
        show-cancel-button
        @confirm="onSubmit(team)"
        class="password-dialog"
    >
      <van-form class="dialog-form">
        <van-cell-group inset>
          <van-field
              v-model="password"
              type="password"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>
<style scoped>
.team-card-list {
  padding: 16px;
  background: transparent;
}

.team-card-wrapper {
  margin-bottom: 16px;
  animation: fadeInUp 0.6s ease-out;
}

.team-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.status-tag {
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border: none;
}

.team-info {
  margin: 12px 0;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #7f8c8d;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.action-btn {
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  justify-content: center;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.empty-state {
  margin-top: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 40px 20px;
  backdrop-filter: blur(10px);
}

.password-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.dialog-form {
  padding: 16px;
}

/* 深度选择器优化 Vant 组件样式 */
:deep(.van-card__content) {
  padding: 16px;
}

:deep(.van-card__header) {
  padding: 16px 16px 0;
}

:deep(.van-card__footer) {
  padding: 0 16px 16px;
}

:deep(.van-card__thumb) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.van-card__title) {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

:deep(.van-card__desc) {
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.5;
}

:deep(.van-image__img) {
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .team-card-list {
    padding: 12px;
  }
  
  .team-card-wrapper {
    margin-bottom: 12px;
  }
  
  .action-buttons {
    gap: 6px;
  }
  
  .action-btn {
    min-width: 70px;
    font-size: 12px;
    padding: 6px 12px;
  }
  
  .info-item {
    font-size: 13px;
  }
}
</style>